﻿// JavaScript Document
$(document).ready(function(){
	show_img();
});

$(function(){

//鼠标经过商品图片
$("#showImg").hover(function(){
		$(this).css({"cursor":"pointer"});
		$(this).attr({title: "点击查看大图"});
});
		   
$("#showImg").click(function(){
	//for IE6
	var isColorAttr = $("#isColorAttr").val();
	if( isColorAttr == 0 ){//第一个属性不是色块，是select则进行show和hide操作
		$("#1").hide();
	}
	$("#2").hide();
	$("#3").hide();
	$("#4").hide();
	$("#5").hide();
	
	var bglabel = "<div id='bg'><\/div>"; 
	$("body").append(bglabel);	
	$("#bg").height($(document).height());
	$("#bg").css('display','block');
	$("#bigbody").show();
	$("#bg").click(function(){
		$("#bg").remove();
		$("#bigbody").hide();
		$("#bg").css('display','none');	
		//for IE6
		var isColorAttr = $("#isColorAttr").val();
		if( isColorAttr == 0 ){
			$("#1").show();
		}
		$("#2").show();
		$("#3").show();
		$("#4").show();
		$("#5").show();
	});		
});

$(".close_pic").hover(function(){
		$(this).css({"cursor":"pointer"});
});

$(".close_pic").click(function(){
	//for IE6
	var isColorAttr = $("#isColorAttr").val();
	if( isColorAttr == 0 ){
		$("#1").show();
	}
	$("#2").show();
	$("#3").show();
	$("#4").show();
	$("#5").show();
	
	show_close();							   
});
							 

jQuery.fn.loadthumb = function(options) {
	options = $.extend({
		 src:""
	},options);
	var _self = this;
	_self.hide();
	var img = new Image();
	$(img).load(function(){
		_self.attr("src", options.src);
		_self.fadeIn("slow");
	}).attr("src", options.src); 
	return _self;
}
  var i = 6;  //已知显示的<a>元素的个数
  var m = 6;  //用于计算的变量
  var $content = $(".big_list_img");
  var count = $content.find("a").length;
  $(".bignextlabel").live("click",function(){
		var $scrollableDiv = $(this).siblings(".big_list_img").find(".pic_small");
		if( !$scrollableDiv.is(":animated")){  
			if(m<count){  
				m++;
				$scrollableDiv.animate({left: "-=116px"}, 600);
			}
			else
			{
				$(".bignextlabel").attr({title: "已经最后一张了"}); 
				$(".bignextlabel").css({"opacity":"0.5"});
				$(".bigprevlabel").css({"opacity":"1.0"});  
			}				
		}
		return false;
  });
   //上一张
  $(".bigprevlabel").live("click",function(){
		var $scrollableDiv = $(this).siblings(".big_list_img").find(".pic_small");
		if( !$scrollableDiv.is(":animated")){
			if(m>i){ 
				m--;
				$scrollableDiv.animate({left: "+=116px"}, 600);
			}
			else
			{
				$(".bigprevlabel").attr({title: "已经是第一张了"}); 
				$(".bigprevlabel").css({"opacity":"0.5"});
				$(".bignextlabel").css({"opacity":"1.0"});   
			}
		}
		return false;
});

$(".pic_small a").eq(0).css({"margin":"4px 3px 0 1px","padding":"2px","border":"2px solid #A1D215"});

$(".pic_small a").hover(
  function(){
   $(this).css({"margin":"4px 3px 0 1px","padding":"2px","border":"2px solid #A1D215"}).siblings().css({"margin":"5px 4px 0 2px","padding":"2px","border":"1px solid #DEDEDE"});
	var src = $(this).find("img").attr("alt");
	//$("#showbigImg").html('<img src=" '+ src +'" alt="" >');
	$(this).parents("#bigbody").find(".myImg").loadthumb({src:src}).attr("src",src);
	return false;
  },
  function(){
    $(this).css({"margin":"4px 3px 0 1px","padding":"2px","border":"2px solid #A1D215","opacity":"1.0"}); 	
  });

});

function show_close()
{
	$("#bg").remove();
	$("#bigbody").hide();
	$("#bg").css('display','none');	
}

function show_img()
{
	var x = 0;
	var y = 50;
//	var html;
//	html +='<div id="bigbody" style="display:none">';
//	html +='<div id="zxx_test_box">';
//	html +='<div class="small_img_body">';
//	html +='<div class="bigprevlabel"></div>';
//	html +='<div class="big_list_img">';
//	html +='<div class="pic_small">';
//	html +='<a href="#0"><img src="images/pro/small/mm9.jpg" alt="mm9.jpg" /></a>';
//	html +='<a href="#1"><img src="images/pro/small/mm1.jpg" alt="mm1.jpg" /></a>';
//	html +='<a href="#2"><img src="images/pro/small/mm2.jpg" alt="mm2.jpg"/></a>';
//	html +='<a href="#3"><img src="images/pro/small/mm3.jpg" alt="mm3.jpg"/></a>';
//	html +='<a href="#4"><img src="images/pro/small/mm4.jpg" alt="mm4.jpg"/></a>';
//	html +='<a href="#5"><img src="images/pro/small/mm5.jpg" alt="mm5.jpg"/></a>';
//	html +='<a href="#6"><img src="images/pro/small/mm6.jpg" alt="mm6.jpg"/></a>';
//	html +='<a href="#7"><img src="images/pro/small/mm7.jpg" alt="mm7.jpg"/></a>';
//	html +='<a href="#8"><img src="images/pro/small/mm8.jpg" alt="mm8.jpg"/></a>';
//	html +='</div>';
//	html +='</div>';
//	html +='<div class="bignextlabel"></div>';
//	html +='</div>';
//	html +='<div class="pic_chg_box">';
//	html +='<ul class="pic_in_area" id="pic_chg_area">';
//	html +='<li><img class="myImg" src="images/pro/big/mm9.jpg" /></li>';
//	html +='</ul>';
//	html +='</div>';
//	html +='<div class="close_pic"></div>';  
//	html +='</div>';   
//	html +='</div>';
//	$("body").append(html);	
	x = (document.body.clientWidth)/2;
	$("#bigbody").css({"top":y+ "px","left":(x-380) + "px"});		
}


function show_again(){
	
	//鼠标经过商品图片
	$("#showImg").hover(function(){
			$(this).css({"cursor":"pointer"});
			$(this).attr({title: "点击查看大图"});
	});
			   
	$("#showImg").click(function(){
		//for IE6
		var isColorAttr = $("#isColorAttr").val();
		if( isColorAttr == 0 ){//第一个属性不是色块，是select则进行show和hide操作
			$("#1").hide();
		}
		$("#2").hide();
		$("#3").hide();
		$("#4").hide();
		$("#5").hide();
		
		var bglabel = "<div id='bg'><\/div>"; 
		$("body").append(bglabel);	
		$("#bg").height($(document).height());
		$("#bg").css('display','block');
		$("#bigbody").show();
		$("#bg").click(function(){
			$("#bg").remove();
			$("#bigbody").hide();
			$("#bg").css('display','none');	
			//for IE6
			var isColorAttr = $("#isColorAttr").val();
			if( isColorAttr == 0 ){
				$("#1").show();
			}
			$("#2").show();
			$("#3").show();
			$("#4").show();
			$("#5").show();
		});		
	});

	$(".close_pic").hover(function(){
			$(this).css({"cursor":"pointer"});
	});

	$(".close_pic").click(function(){
		//for IE6
		var isColorAttr = $("#isColorAttr").val();
		if( isColorAttr == 0 ){
			$("#1").show();
		}
		$("#2").show();
		$("#3").show();
		$("#4").show();
		$("#5").show();
		
		show_close();							   
	});
								 

	jQuery.fn.loadthumb = function(options) {
		options = $.extend({
			 src:""
		},options);
		var _self = this;
		_self.hide();
		var img = new Image();
		$(img).load(function(){
			_self.attr("src", options.src);
			_self.fadeIn("slow");
		}).attr("src", options.src); 
		return _self;
	}
	  var i = 6;  //已知显示的<a>元素的个数
	  var m = 6;  //用于计算的变量
	  var $content = $(".big_list_img");
	  var count = $content.find("a").length;
	  $(".bignextlabel").live("click",function(){
			var $scrollableDiv = $(this).siblings(".big_list_img").find(".pic_small");
			if( !$scrollableDiv.is(":animated")){  
				if(m<count){  
					m++;
					$scrollableDiv.animate({left: "-=116px"}, 600);
				}
				else
				{
					$(".bignextlabel").attr({title: "已经最后一张了"}); 
					$(".bignextlabel").css({"opacity":"0.5"});
					$(".bigprevlabel").css({"opacity":"1.0"});  
				}				
			}
			return false;
	  });
	   //上一张
	  $(".bigprevlabel").live("click",function(){
			var $scrollableDiv = $(this).siblings(".big_list_img").find(".pic_small");
			if( !$scrollableDiv.is(":animated")){
				if(m>i){ 
					m--;
					$scrollableDiv.animate({left: "+=116px"}, 600);
				}
				else
				{
					$(".bigprevlabel").attr({title: "已经是第一张了"}); 
					$(".bigprevlabel").css({"opacity":"0.5"});
					$(".bignextlabel").css({"opacity":"1.0"});   
				}
			}
			return false;
	});

	$(".pic_small a").eq(0).css({"margin":"4px 3px 0 1px","padding":"2px","border":"2px solid #A1D215"});

	$(".pic_small a").hover(
	  function(){
	   $(this).css({"margin":"4px 3px 0 1px","padding":"2px","border":"2px solid #A1D215"}).siblings().css({"margin":"5px 4px 0 2px","padding":"2px","border":"1px solid #DEDEDE"});
		var src = $(this).find("img").attr("alt");
		//$("#showbigImg").html('<img src=" '+ src +'" alt="" >');
		$(this).parents("#bigbody").find(".myImg").loadthumb({src:src}).attr("src",src);
		return false;
	  },
	  function(){
	    $(this).css({"margin":"4px 3px 0 1px","padding":"2px","border":"2px solid #A1D215","opacity":"1.0"}); 	
	  });	
}
